<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>档案管理-统计</title>
<!--[if lt IE 9]>
  <script src="libs/html5shiv.min.js"></script>
  <script src="libs/respond.min.js"></script>
  <![endif]-->
<script src="libs/jquery-1.12.1.min.js"></script>
<link href="libs/bootstrap-3.3.6/css/bootstrap.min.css" rel="stylesheet">
<script src="libs/bootstrap-3.3.6/js/bootstrap.min.js"></script>
<script src="libs/handlebars.min.js"></script>
<script src="libs/js.cookie-2.1.0.min.js"></script>
<script src="libs/getQueryString.js"></script>
<script src="libs/md5.min.js"></script>
<script src="libs/jquery.backstretch.min.js"></script>
<script type="text/javascript" src="libs/handlebars.min.js"></script>
<script src="libs/d3.v3.min.js"></script>
<script src="libs/nv.d3.min.js"></script>
<script src="libs/dateFormat.js"></script>
<link href="libs/bootstrap-3.3.6/css/nv.d3.min.css" rel="stylesheet">



</head>
<body>
	<div class="container">
		<div class="row">
			<div class="page-header">
				<h1 align="center">
					<strong>档案管理</strong>
				</h1>
			</div>
		</div>
	</div>
	<div class="container">
		<div class="row">
			<div class="col-md-12">
				<ul class="nav nav-pills ">
					<li><a href="index.html">首页</a></li>
					<li><a href="add.html"><strong>档案添加</strong></a></li>
					<li><a href="queryone.html"><strong>查询详细</strong></a></li>
					<li><a href="query.html"><strong>档案查询</strong></a></li>
					<li><a href="zhaopian.html"><strong>照片详情</strong></a></li>
					<li class="active"><a href="tongji.html"><strong>统计</strong></a></li>
				</ul>
			</div>
		</div>
	</div>
	<div class="container">
		<div class="col-md-6">
			<div class="row">
				开始时间：<input id=date1 type="date" /> 结束时间：<input id=date2
					type="date" />
				<button id="shijian" class="btn btn-primary btn-block">查询</button>
			</div>
		</div>
	</div>
	<div class="container">
		<div class="col-md-6" id="chart">
			<p class="text-center">
				<br />
			<hr />
			<strong>用户档案的总条数</strong>
			<svg style="height: 480px; width: 100%"></svg>
			<br />
			</p>
		</div>
	</div>


	<script type="text/javascript">
		$(function() {
			var d2 = new Date();
			$('#date2').val(d2.format('yyyy-MM-dd'));
			var d1 = new Date();
			$('#date1').val(d1.format('yyyy-MM-01'));
			$('#shijian').click(
					function() {
						$.post('queryg.action', {
							date1 : $('#date1').val(),
							date2 : $('#date2').val(),
						}, function(res, status) {
							console.log(res);
							nv.addGraph(function() {
								var chart = nv.models.pieChart().x(function(d) {
									return d.nickname
								}).y(function(d) {
									return d.counter
								}).showLabels(true).labelType('percent');
								d3.select("#chart svg").datum(res).transition()
										.duration(350).call(chart);
								return chart;
							})
						});
					})
		});
	</script>



</body>
</html>